<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
        <hr>
        <h3>a的值是:{{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a+1</button>
        <h3>b的值是:{{numbers.b}}</h3>
        <button @click="numbers.b++">点我让b+1</button>
        <button @click="numbers ={a:666,b:888}">彻底替换掉numbers</button>
    </div>

</body>
<!-- 
    深度监视:
        (1). Vue中的watch默认不监测对象内部值的改变
        (2). 配置deep:true可以监测对象内部值改变(多层)
    备注:
        (1). Vue自身可以监视对象内部值的改变, 但Vue提供的watch默认不可以
        (2). 使用watch根据数据的具体结构, 决定是否采用深度监测
 -->

</html>
<script>
    const vm = new Vue({
        el: '#root',
        data: {
            isHost: true,
            numbers: {
                a: 1,
                b: 1
            }
        },
        computed: {
            info() {
                return this.isHost ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather() {
                this.isHost = !this.isHost
            }
        },
        watch: {
            // 'numbers.a': {
            //     handler() {
            //         console.log('a被改变了')
            //     }
            // }
            numbers: {
                // deep: true,
                handler() {
                    console.log('numbers改变了')
                }
            }
        }
        // watch: {
        //     isHost: {
        //         immediate: true,
        //         handler(newValue, oldValue) {
        //             console.log('isHost被修改了', newValue, oldValue);
        //         }
        //     }
        // }

    })
    vm.$watch('isHost', {
        immediate: true,
        handler(newValue, oldValue) {
            console.log('isHost被修改了', newValue, oldValue);
        }
    })

</script>